<template>
  <div class="dashboard-editor-container">
    <el-card>
      <div>
        <el-row :gutter="20" class="rows">
          <el-col :span="8">
            <el-card>
              <div id="reader_id">
                <h3>读者证号：</h3>
                <el-input v-model="reader_id" placeholder="请输入借阅者读者证……" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div id="book_id">
                <h3>书号：</h3>
                <el-input v-model="book_id" placeholder="请输入借阅书号……" />
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div id="return_date">
                <h3>应还日期：</h3>
                <el-input v-model="return_time" :disabled="true" />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row class="rows">
          <el-col :span="24" style="text-align: center">
            <div id="check">
              <el-button icon="el-icon-check" style="height: 60px;width: 240px;font-size: 18px;" @click="sentData">确认借阅</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { sentData } from '@/api/user'
export default {
  name: 'Index',
  data() {
    return {
      reader_id: '',
      book_id: '',
      return_time: ''
    }
  },
  created() {
    var return_date = new Date()
    return_date.setDate(return_date.getDate() + 31)
    this.return_time = return_date.getFullYear() + ' 年 ' + (return_date.getMonth() + 1) + ' 月 ' + return_date.getDate() + ' 日'
  },
  methods: {
    sentData() {
      const now = new Date()
      const retime = new Date()
      retime.setDate(now.getDate() + 31)
      const data = {
        'reader_id': this.reader_id,
        'book_id': this.book_id,
        's_backtime': retime.getFullYear() + '' + ((retime.getMonth() + 1) > 10 ? (retime.getMonth() + 1) : '0' + (retime.getMonth() + 1)) + '' + (retime.getDate() > 10 ? retime.getDate() : '0' + retime.getDate()),
        'lenttime': now.getFullYear() + '' + ((now.getMonth() + 1) > 10 ? (now.getMonth() + 1) : '0' + (now.getMonth() + 1)) + '' + (now.getDate() > 10 ? now.getDate() : '0' + now.getDate())
      }
      sentData(data).then(response => {
        this.reader_id = ''
        this.book_id = ''
        this.$message({
          message: '提交借阅记录成功',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
        this.reader_id = ''
        this.book_id = ''
        this.$message({
          message: '提交借阅记录失败',
          type: 'error'
        })
      })
    }
  }
}
</script>

<style scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  }
  h3 {
    margin: 0 0 3px 0;
    color: #585858;
  }
  .rows {
    margin-top: 36px;
  }
</style>
